import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Button, Icon, List, Modal } from 'antd';
import { routerRedux } from 'dva/router';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import Ellipsis from '../../components/Ellipsis';

import styles from './ExamList.less';

@connect(state => ({
  exam: state.exam,
}))
export default class ExamList extends PureComponent {
  componentDidMount() {
    this.props.dispatch({
      type: 'exam/fetch',
      payload: {
        pageSize: 100,
      },
    });
  }
  handleAddExam = () => {
    this.props.dispatch(routerRedux.push('/exam/add'));
  }

  render() {
    const { exam: { list, loading } } = this.props;

    const content = (
      <div className={styles.pageHeaderContent}>
        <p>
          考试列表考试列表
        </p>
      </div>
    );

    const extraContent = (
      <div className={styles.extraImg}>
        <img alt="这是一个标题" src="https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png" />
      </div>
    );

    const startExam = (e) => {
      const id = e.target.getAttribute('id');
      this.props.dispatch({
        type: 'exam/edit',
        payload: {
          id,
          status: 'examing'
        },
        callback: (doc) => {
          console.log(doc);
        },
      });
    }

    const stopExam = (e) => {
      const id = e.target.getAttribute('id');
      this.props.dispatch({
        type: 'exam/edit',
        payload: {
          id,
          status: 'finish'
        }
      });
    }

    const statusInfo = {
      'config': '配置中',
      'done': '完成配置',
      'examing': '考试中',
      'finish': '考试停止'
    };

    return (
      <PageHeaderLayout
        title="考试列表"
        content={content}
        extraContent={extraContent}
      >
        <div className={styles.ExamList}>
          <List
            rowKey="id"
            loading={loading}
            grid={{ gutter: 24, lg: 3, md: 2, sm: 1, xs: 1 }}
            dataSource={['', ...list]}
            renderItem={item => (item ? (
                <List.Item key={item.id}>
                  <Card hoverable className={styles.card} actions={[<span id={item.id} onClick={startExam}>开始考试</span>, <span style={{ color: '#ff1e26' }} id={item.id} onClick={stopExam}>停止考试</span>]}>
                    <Card.Meta
                      title={<a href="#" hidden-id={item.id}>{item.name}</a>}
                      description={(<Ellipsis className={styles.item} lines={3}>考试状态：{statusInfo[item.status]}<br/>考试地址：http://exam.zhifa315.com/home/ex/alias/{item.alias}<br/>操作时间：{item.updated_at}</Ellipsis>)}
                    />
                  </Card>
                </List.Item>
              ) : (
                <List.Item>
                  <Button type="dashed" className={styles.newButton} onClick={this.handleAddExam}>
                    <Icon type="plus" /> 新增考试
                  </Button>
                </List.Item>
              )
            )}
          />
        </div>
      </PageHeaderLayout>
    );
  }
}
